<template>
  <div
    class="widgets"
    :style="{
      cursor:'move',
      left: val.left + 'px' ,
      top:  val.top + 'px',
      width: val.width + 'px',
      height: val.height + 'px',
      textAlign: val.style.Alignment,
      fontSize: val.style.FontSize + 'pt',
      color: val.style.FontColor,
    }"
    style="position:absolute;overflow:hidden"
    @contextmenu.prevent.stop="(e) => onTxtContextmenu(e, val)"
  >
    <table
      border="1"
      width="100%"
      cellspacing="0"
      cellpadding="2"
      style="border-collapse:collapse;font-size:12px;"
      bordercolor="#000000"
    >
      <tr>
        <th
          v-for="item in columns"
          :key="item.name"
          :width="item.name==='_seq'?40:''"
        >{{item.title}}
        </th>
      </tr>
      <tr>
        <td v-for="item in columns" :key="item.name">{{item.value}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  const WIDGET_NAME = 'braid-table'

  export default {
    name: WIDGET_NAME,
    setting: {
      type: WIDGET_NAME,
      isEdit: false, // 是否可编辑
      dragable: true, // 是否可拖拽
      resizable: true, // 尺寸是否可变
      width: 240,
      height: 60,
      left: 50,
      top: 10,
      title: '表格',
      value: [],
      defaultValue: [],
      tabelHtml: '',
      columnsAttr: [], // 表格列选项
      columns: [], // 已选表格列表
      selectCol: [], // 已选表格列name数组（用于多选框双向绑定）
      name: '',
      style: {
        zIndex: 0,
        Alignment: 'left', // 对齐方式 1--左靠齐 2--居中 3--右靠齐
        FontSize: 10,
        FontColor: '#000000',
        BorderColor: '#000000',
        AutoHeight: true, // 高度自动（模板在该元素位置以下的元素都关联打印）
        BottomMargin: 30, // 距离下边距
      },
    },
    props: [
      'val', // 文本对象
    ],
    computed: {
      // 去掉type='row'的数据
      columns() {
        let col = this.val.columns || []
        return col
      },
    },
    methods: {
      onTxtContextmenu(event, item) {
        this.$contextmenu({
          items: [
            {
              label: "删除",
              icon: "el-icon-delete",
              divided: true,
              onClick: () => {
                this.$vptd.commit('delete', item.uuid)
              }
            },
            {
              label: "返回",
              icon: "el-icon-back",
              onClick: () => {
                window.history.back()
              }
            },
            {
              label: "重新加载",
              divided: true,
              icon: "el-icon-refresh",
              onClick: () => {
                window.location.reload()
              }
            },
          ],
          event, // 鼠标事件信息
          customClass: "custom-class", // 自定义菜单 class
          zIndex: 1000, // 菜单样式 z-index
          minWidth: 230 // 主菜单最小宽度
        });
        return false;
      },
    },
  }
</script>

